import { useEffect, useState } from 'react';
import { Button } from './Button';
import { ImageWithLoading } from './ImageWithLoading';
import { useParams } from 'react-router-dom';
import { Star, Check, X, ArrowRight, ChevronDown, ChevronUp, BarChart3, Battery, Zap } from 'lucide-react';
import { usePageTitle } from '../lib/usePageTitle';

// Type definitions
interface ReviewSpecs {
  stallForce: string;
  amplitude: string;
  speedRange: string;
  weight: string;
  batteryLife: string;
  noiseLevel: string;
  attachments: string;
}

interface PerformanceMetrics {
  muscleTensionReduction: number;
  recoveryTimeImprovement: number;
  consistentForceDelivery: number;
}

interface RelatedReview {
  slug: string;
  name: string;
  description: string;
  image: string;
  rating: number;
}

interface ProductReview {
  name: string;
  tagline: string;
  rating: number;
  heroImage: string;
  heroAlt: string;
  description: string;
  price: string;
  pros: string[];
  cons: string[];
  specs: ReviewSpecs;
  performanceMetrics: PerformanceMetrics;
  relatedReviews: RelatedReview[];
}
// Product review data
const productReviews: Record<string, ProductReview> = {
  'theragun-pro': {
    name: 'Theragun Pro Gen 4',
    tagline: 'The Ultimate Professional-Grade Percussive Therapy Device',
    rating: 4.8,
    heroImage: 'https://images.unsplash.com/photo-1593164842264-854604db2260?ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80',
    heroAlt: 'TheraGun Pro being used on shoulder muscles',
    description: 'Is this premium massage gun worth the hefty price tag? Our verdict after 3 months of testing on athletes, chronic pain sufferers, and everyday users.',
    price: '$599',
    pros: ['Industry-leading 60lb stall force handles even the densest muscle tissue', '16mm amplitude delivers 60% deeper penetration than standard massage guns', 'Patented QuietForce Technology™ operates at just 65-70 dB (quieter than a standard electric toothbrush)', 'Multi-grip ergonomic handle with 4-way rotating arm reaches 100% of body without strain', 'Dual swappable batteries provide 300+ minutes of continuous use'],
    cons: ['Premium price point ($599) is 2-3x higher than mid-range competitors', 'Heavier than most massage guns at 2.9 lbs (1.3kg)', 'App requires $19.99/month subscription for full access to all guided routines'],
    specs: {
      stallForce: '60 lbs (27.2 kg)',
      amplitude: '16 mm',
      speedRange: '1750-2400 PPM (5 settings)',
      weight: '2.9 lbs (1.3 kg)',
      batteryLife: '150 min per battery (300 min total)',
      noiseLevel: '65-70 dB',
      attachments: '6 (Dampener, Standard Ball, Wedge, Thumb, Cone, Supersoft)'
    },
    performanceMetrics: {
      muscleTensionReduction: 92,
      recoveryTimeImprovement: 87,
      consistentForceDelivery: 96
    },
    relatedReviews: [{
      slug: 'hypervolt-2-pro',
      name: 'Hypervolt 2 Pro Review',
      description: "The quietest premium massage gun we've tested",
      image: 'https://images.unsplash.com/photo-1594737625785-a6cbdabd333c?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80',
      rating: 4.0
    }, {
      slug: 'ekrin-b37',
      name: 'Ekrin B37 Review',
      description: 'The best mid-range massage gun for most people',
      image: 'https://images.unsplash.com/photo-1616279969856-759f316a5ac1?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80',
      rating: 4.5
    }]
  },
  'ekrin-b37': {
    name: 'Ekrin B37',
    tagline: 'The Best Mid-Range Massage Gun For Most People',
    rating: 4.5,
    heroImage: 'https://images.unsplash.com/photo-1616279969856-759f316a5ac1?ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80',
    heroAlt: 'Ekrin B37 massage gun with attachments',
    description: 'With its powerful motor, ergonomic design, and lifetime warranty, is the Ekrin B37 the perfect balance of performance and value?',
    price: '$329',
    pros: ['Impressive 56lb stall force rivals premium models at half the price', 'Ergonomic 15° handle design reduces wrist strain during extended use', 'Ultra-long 8-hour battery life outlasts most competitors', 'Lifetime warranty provides unmatched peace of mind', 'Responsive customer service based in the USA'],
    cons: ['12mm amplitude is good but not as deep as premium 16mm options', 'No Bluetooth connectivity or app integration', 'Limited color options (only available in blue)'],
    specs: {
      stallForce: '56 lbs (25.4 kg)',
      amplitude: '12 mm',
      speedRange: '1400-3200 PPM (5 settings)',
      weight: '2.2 lbs (1.0 kg)',
      batteryLife: '480 min (8 hours)',
      noiseLevel: '60-65 dB',
      attachments: '4 (Ball, Flat, Bullet, Fork)'
    },
    performanceMetrics: {
      muscleTensionReduction: 88,
      recoveryTimeImprovement: 85,
      consistentForceDelivery: 90
    },
    relatedReviews: [{
      slug: 'theragun-pro',
      name: 'Theragun Pro Review',
      description: 'The ultimate premium massage gun experience',
      image: 'https://images.unsplash.com/photo-1593164842264-854604db2260?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80',
      rating: 4.8
    }, {
      slug: 'hypervolt-2-pro',
      name: 'Hypervolt 2 Pro Review',
      description: "The quietest premium massage gun we've tested",
      image: 'https://images.unsplash.com/photo-1594737625785-a6cbdabd333c?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80',
      rating: 4.0
    }]
  },
  'hypervolt-2-pro': {
    name: 'Hypervolt 2 Pro',
    tagline: 'The Quietest Premium Massage Gun On The Market',
    rating: 4.0,
    heroImage: 'https://images.unsplash.com/photo-1594737625785-a6cbdabd333c?ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80',
    heroAlt: 'Hypervolt 2 Pro massage gun',
    description: 'With its whisper-quiet operation and Bluetooth connectivity, does the Hypervolt 2 Pro justify its premium price tag?',
    price: '$399',
    pros: ['Ultra-quiet operation (55-65 dB) even at highest settings', 'Bluetooth connectivity with guided routines via app', 'Sleek, premium design with LED battery indicator', 'Pressure sensor with visual feedback', 'TSA-approved for carry-on luggage'],
    cons: ['Limited 35lb stall force underperforms compared to similarly priced options', 'Battery life is only 3 hours (shorter than competitors)', 'Heavier than average at 2.6 lbs', "Premium price doesn't match performance metrics"],
    specs: {
      stallForce: '35 lbs (15.9 kg)',
      amplitude: '14 mm',
      speedRange: '1800-3200 PPM (5 settings)',
      weight: '2.6 lbs (1.18 kg)',
      batteryLife: '180 min (3 hours)',
      noiseLevel: '55-65 dB',
      attachments: '5 (Fork, Ball, Cushion, Flat, Bullet)'
    },
    performanceMetrics: {
      muscleTensionReduction: 75,
      recoveryTimeImprovement: 72,
      consistentForceDelivery: 80
    },
    relatedReviews: [{
      slug: 'theragun-pro',
      name: 'Theragun Pro Review',
      description: 'The ultimate premium massage gun experience',
      image: 'https://images.unsplash.com/photo-1593164842264-854604db2260?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80',
      rating: 4.8
    }, {
      slug: 'ekrin-b37',
      name: 'Ekrin B37 Review',
      description: 'The best mid-range massage gun for most people',
      image: 'https://images.unsplash.com/photo-1616279969856-759f316a5ac1?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80',
      rating: 4.5
    }]
  },
  'renpho-mini': {
    name: 'Renpho Mini',
    tagline: 'The Ultra-Portable Massage Gun For On-The-Go Recovery',
    rating: 3.2,
    heroImage: 'https://images.unsplash.com/photo-1588286840104-8957b019727f?ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80',
    heroAlt: 'Renpho Mini massage gun in hand',
    description: 'At just 6.7 inches long and weighing only 1.5 pounds, can this tiny massage gun deliver effective recovery for travelers and commuters?',
    price: '$79',
    pros: ['Ultra-compact size (6.7" long) fits in purses and small bags', 'Lightweight at just 1.5 lbs', 'Surprisingly powerful 20lb stall force for its size', 'USB-C rechargeable for convenient charging on the go', 'Affordable price point under $80'],
    cons: ['Limited 9mm amplitude only treats surface-level tension', 'Only 2 hours of battery life', 'Louder than expected for its size (70-75 dB)', 'Only 3 attachment options'],
    specs: {
      stallForce: '20 lbs (9.1 kg)',
      amplitude: '9 mm',
      speedRange: '1800-3200 PPM (4 settings)',
      weight: '1.5 lbs (0.68 kg)',
      batteryLife: '120 min (2 hours)',
      noiseLevel: '70-75 dB',
      attachments: '3 (Ball, Flat, Bullet)'
    },
    performanceMetrics: {
      muscleTensionReduction: 65,
      recoveryTimeImprovement: 60,
      consistentForceDelivery: 70
    },
    relatedReviews: [{
      slug: 'theragun-pro',
      name: 'Theragun Pro Review',
      description: 'The ultimate premium massage gun experience',
      image: 'https://images.unsplash.com/photo-1593164842264-854604db2260?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80',
      rating: 4.8
    }, {
      slug: 'bob-and-brad-q2',
      name: 'Bob and Brad Q2 Review',
      description: 'The best budget massage gun under $150',
      image: 'https://images.unsplash.com/photo-1591291621164-2c6367723315?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80',
      rating: 3.0
    }]
  },
  'jarvis-standing-desk': {
    name: 'Jarvis Standing Desk',
    tagline: 'The Premium Adjustable Standing Desk For Professionals',
    rating: 4.0,
    heroImage: 'https://images.unsplash.com/photo-1595846519845-68e298c2edd8?ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80',
    heroAlt: 'Jarvis Standing Desk in modern office',
    description: 'After 6 months of daily use, we break down the pros and cons of this popular standing desk. Is the premium price justified?',
    price: '$499',
    pros: ['Dual motor system provides smooth, quiet operation', 'Memory presets store up to 4 height settings', 'Impressive weight capacity up to 350 lbs', 'Sustainable bamboo desktop option available', 'Excellent build quality with 7-year warranty'],
    cons: ['Premium price point compared to competitors', 'Assembly can be challenging (2-3 hours)', 'Limited desktop size options', 'No built-in cable management'],
    specs: {
      stallForce: 'N/A (Desk)',
      amplitude: 'N/A (Desk)',
      speedRange: '1.5 inches per second',
      weight: '70 lbs (frame only)',
      batteryLife: 'N/A (Powered)',
      noiseLevel: '<50 dB',
      attachments: 'Memory controller, cable tray'
    },
    performanceMetrics: {
      muscleTensionReduction: 0,
      recoveryTimeImprovement: 0,
      consistentForceDelivery: 95
    },
    relatedReviews: [{
      slug: 'herman-miller-aeron',
      name: 'Herman Miller Aeron Review',
      description: 'The office chair gold standard',
      image: 'https://images.unsplash.com/photo-1586953208448-b95a79798f07?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
      rating: 4.7
    }]
  },
  'oura-ring-gen-3': {
    name: 'Oura Ring Gen 3',
    tagline: 'Sleep Tracking Perfected In A Tiny Package',
    rating: 4.5,
    heroImage: 'https://images.unsplash.com/photo-1600861194942-f883de0dfe96?ixlib=rb-1.2.1&auto=format&fit=crop&w=2000&q=80',
    heroAlt: 'Oura Ring Gen 3 on finger',
    description: 'Is this tiny ring the best sleep tracker on the market? Our in-depth analysis after 90 nights of testing.',
    price: '$299',
    pros: ['Incredibly accurate sleep tracking with detailed metrics', 'Unobtrusive design - wear 24/7 without discomfort', 'Excellent battery life (7+ days)', 'Comprehensive health insights and trends', 'Water resistant up to 100 meters'],
    cons: ['Requires monthly subscription ($5.99) for full features', 'Limited fitness tracking compared to smartwatches', 'Sizing can be tricky - order sizing kit first', 'No real-time notifications or display'],
    specs: {
      stallForce: 'N/A (Wearable)',
      amplitude: 'N/A (Wearable)',
      speedRange: 'N/A (Wearable)',
      weight: '4-6g (size dependent)',
      batteryLife: '7 days',
      noiseLevel: 'Silent',
      attachments: 'Charging dock'
    },
    performanceMetrics: {
      muscleTensionReduction: 0,
      recoveryTimeImprovement: 85,
      consistentForceDelivery: 92
    },
    relatedReviews: [{
      slug: 'apple-watch-series-9',
      name: 'Apple Watch Series 9 Review',
      description: 'Health tracking revolution on your wrist',
      image: 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
      rating: 4.6
    }, {
      slug: 'whoop-4-0',
      name: 'WHOOP 4.0 Review',
      description: '24/7 health monitoring and recovery insights',
      image: 'https://images.unsplash.com/photo-1611312449408-fcece27cdbb7?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
      rating: 4.1
    }]
  },
  'apple-watch-series-9': {
    name: 'Apple Watch Series 9',
    tagline: 'Health Tracking Revolution On Your Wrist',
    rating: 4.6,
    heroImage: 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80',
    heroAlt: 'Apple Watch Series 9 on wrist',
    description: 'The latest Apple Watch brings advanced health monitoring to your wrist. Is it worth the upgrade from previous generations?',
    price: '$399',
    pros: ['Advanced health sensors including ECG and blood oxygen', 'Bright, always-on Retina display', 'Fast S9 chip with Siri on-device processing', 'Comprehensive fitness tracking and workouts', 'Seamless integration with iPhone ecosystem'],
    cons: ['Daily charging required', 'Premium price for full feature set', 'Limited compatibility (iPhone only)', 'Battery life decreases with heavy use'],
    specs: {
      stallForce: 'N/A (Smartwatch)',
      amplitude: 'N/A (Smartwatch)',
      speedRange: 'N/A (Smartwatch)',
      weight: '38.7g (41mm) / 45.9g (45mm)',
      batteryLife: '18 hours typical use',
      noiseLevel: 'Silent (haptic feedback)',
      attachments: 'Magnetic charging cable, sport band'
    },
    performanceMetrics: {
      muscleTensionReduction: 0,
      recoveryTimeImprovement: 78,
      consistentForceDelivery: 88
    },
    relatedReviews: [{
      slug: 'fitbit-charge-5',
      name: 'Fitbit Charge 5 Review',
      description: 'The ultimate fitness tracker',
      image: 'https://images.unsplash.com/photo-1575311373937-040b8e1fd5b6?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
      rating: 4.3
    }, {
      slug: 'oura-ring-gen-3',
      name: 'Oura Ring Gen 3 Review',
      description: 'Sleep tracking perfected',
      image: 'https://images.unsplash.com/photo-1600861194942-f883de0dfe96?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80',
      rating: 4.5
    }]
  },
  'fitbit-charge-5': {
    name: 'Fitbit Charge 5',
    tagline: 'The Ultimate Fitness Tracker For Everyday Athletes',
    rating: 4.3,
    heroImage: 'https://images.unsplash.com/photo-1575311373937-040b8e1fd5b6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80',
    heroAlt: 'Fitbit Charge 5 fitness tracker',
    description: 'Comprehensive fitness tracking meets sleek design. Our 3-month real-world testing review of this popular fitness tracker.',
    price: '$179',
    pros: ['Built-in GPS for accurate outdoor workout tracking', 'Stress management with EDA sensor', 'Up to 7 days battery life', 'Color AMOLED display is bright and readable', 'Comprehensive sleep and health insights'],
    cons: ['No music storage or playback', 'Limited smart features compared to smartwatches', 'Premium features require Fitbit Premium subscription', 'Small screen can be hard to read detailed info'],
    specs: {
      stallForce: 'N/A (Fitness Tracker)',
      amplitude: 'N/A (Fitness Tracker)',
      speedRange: 'N/A (Fitness Tracker)',
      weight: '29g',
      batteryLife: '7 days',
      noiseLevel: 'Silent',
      attachments: 'Charging cable, sport band'
    },
    performanceMetrics: {
      muscleTensionReduction: 0,
      recoveryTimeImprovement: 82,
      consistentForceDelivery: 85
    },
    relatedReviews: [{
      slug: 'apple-watch-series-9',
      name: 'Apple Watch Series 9 Review',
      description: 'Premium smartwatch with health features',
      image: 'https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
      rating: 4.6
    }]
  },
  'peloton-bike-plus': {
    name: 'Peloton Bike+',
    tagline: 'Home Fitness Game Changer With Interactive Training',
    rating: 4.4,
    heroImage: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80',
    heroAlt: 'Peloton Bike+ in home gym setup',
    description: 'Is the premium price justified? We spent 6 months with the Peloton Bike+ to find out if it lives up to the hype.',
    price: '$2,495',
    pros: ['Immersive 23.8" rotating HD touchscreen', 'Thousands of live and on-demand classes', 'Smooth, quiet magnetic resistance', 'Auto-resistance adjustments during classes', 'Premium build quality and design'],
    cons: ['Very expensive upfront cost ($2,495)', 'Monthly subscription required ($44/month)', 'Large footprint requires dedicated space', 'Limited to Peloton ecosystem', 'Expensive replacement parts and service'],
    specs: {
      stallForce: 'N/A (Exercise Bike)',
      amplitude: 'N/A (Exercise Bike)',
      speedRange: 'Variable resistance levels',
      weight: '140 lbs (63.5 kg)',
      batteryLife: 'N/A (Plugged in)',
      noiseLevel: '<40 dB operation',
      attachments: 'Heart rate monitor, cycling shoes'
    },
    performanceMetrics: {
      muscleTensionReduction: 0,
      recoveryTimeImprovement: 90,
      consistentForceDelivery: 92
    },
    relatedReviews: [{
      slug: 'nordictrack-x22i',
      name: 'NordicTrack X22i Review',
      description: 'Premium incline treadmill with iFit',
      image: 'https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
      rating: 4.2
    }]
  },
  'herman-miller-aeron': {
    name: 'Herman Miller Aeron',
    tagline: 'The Office Chair Gold Standard For Ergonomics',
    rating: 4.7,
    heroImage: 'https://images.unsplash.com/photo-1586953208448-b95a79798f07?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80',
    heroAlt: 'Herman Miller Aeron chair in office',
    description: 'After years of use, we evaluate whether this expensive chair delivers on its ergonomic promises and justifies the premium price.',
    price: '$1,395',
    pros: ['Exceptional ergonomic design reduces back strain', 'Breathable mesh prevents overheating', 'Highly adjustable for perfect fit', '12-year warranty shows build confidence', 'Retains value well for resale'],
    cons: ['Very expensive initial investment', 'Hard seat may be uncomfortable initially', 'Complex adjustment options can be overwhelming', 'Not suitable for all body types'],
    specs: {
      stallForce: 'N/A (Office Chair)',
      amplitude: 'N/A (Office Chair)',
      speedRange: 'N/A (Office Chair)',
      weight: '39 lbs (17.7 kg)',
      batteryLife: 'N/A (Manual)',
      noiseLevel: 'Silent operation',
      attachments: 'Various arm and base options'
    },
    performanceMetrics: {
      muscleTensionReduction: 88,
      recoveryTimeImprovement: 0,
      consistentForceDelivery: 95
    },
    relatedReviews: [{
      slug: 'jarvis-standing-desk',
      name: 'Jarvis Standing Desk Review',
      description: 'Premium adjustable standing desk',
      image: 'https://images.unsplash.com/photo-1595846519845-68e298c2edd8?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80',
      rating: 4.0
    }]
  },
  'whoop-4-0': {
    name: 'WHOOP 4.0',
    tagline: '24/7 Health Monitoring And Recovery Insights',
    rating: 4.1,
    heroImage: 'https://images.unsplash.com/photo-1611312449408-fcece27cdbb7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80',
    heroAlt: 'WHOOP 4.0 fitness tracker',
    description: 'The subscription-based fitness tracker promises insights into your recovery and performance. Does it deliver value?',
    price: '$30/month',
    pros: ['Continuous heart rate and recovery monitoring', 'Detailed sleep analysis and optimization tips', 'Strain coaching for optimal training', 'No screen means longer battery life (5 days)', 'Comprehensive health insights and trends'],
    cons: ['Subscription-only model ($30/month)', 'No display means you need phone for data', 'Takes time to learn your patterns accurately', 'Limited smart features compared to watches'],
    specs: {
      stallForce: 'N/A (Fitness Tracker)',
      amplitude: 'N/A (Fitness Tracker)',
      speedRange: 'N/A (Fitness Tracker)',
      weight: '33g with band',
      batteryLife: '5 days',
      noiseLevel: 'Silent',
      attachments: 'Battery pack, various bands'
    },
    performanceMetrics: {
      muscleTensionReduction: 0,
      recoveryTimeImprovement: 87,
      consistentForceDelivery: 90
    },
    relatedReviews: [{
      slug: 'oura-ring-gen-3',
      name: 'Oura Ring Gen 3 Review',
      description: 'Sleep tracking in a tiny ring',
      image: 'https://images.unsplash.com/photo-1600861194942-f883de0dfe96?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80',
      rating: 4.5
    }]
  },
  'nordictrack-x22i': {
    name: 'NordicTrack X22i',
    tagline: 'Premium Incline Treadmill With Interactive Training',
    rating: 4.2,
    heroImage: 'https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80',
    heroAlt: 'NordicTrack X22i incline treadmill',
    description: 'Interactive training meets serious hardware. Our comprehensive review of this premium treadmill after 6 months of testing.',
    price: '$2,999',
    pros: ['Massive -6% to 40% incline range for varied training', 'Large 22" HD touchscreen with iFit integration', 'Powerful 4.25 CHP motor handles any workout', 'Spacious 22" x 60" running surface', 'Automatic incline/decline changes during workouts'],
    cons: ['Very expensive ($2,999 + $39/month iFit)', 'Requires significant floor space and ceiling height', 'Heavy (335 lbs) and difficult to move', 'iFit subscription required for best features'],
    specs: {
      stallForce: 'N/A (Treadmill)',
      amplitude: 'N/A (Treadmill)',
      speedRange: '0-12 MPH',
      weight: '335 lbs (152 kg)',
      batteryLife: 'N/A (Plugged in)',
      noiseLevel: '<65 dB operation',
      attachments: 'Heart rate monitor, water bottle holders'
    },
    performanceMetrics: {
      muscleTensionReduction: 0,
      recoveryTimeImprovement: 85,
      consistentForceDelivery: 93
    },
    relatedReviews: [{
      slug: 'peloton-bike-plus',
      name: 'Peloton Bike+ Review',
      description: 'Premium interactive home fitness bike',
      image: 'https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80',
      rating: 4.4
    }]
  }
};
export function ReviewPage() {
  const [isSpecsOpen, setIsSpecsOpen] = useState(false);
  const { productSlug } = useParams<{ productSlug: string }>();
  const [review, setReview] = useState<ProductReview | null>(null);

  useEffect(() => {
    // Default to theragun-pro if no slug is provided or if the slug doesn't exist in our data
    const currentSlug = productSlug || 'theragun-pro';
    const reviewData = productReviews[currentSlug] || productReviews['theragun-pro'];
    setReview(reviewData);
  }, [productSlug]);

  // Update page title when review data is loaded
  usePageTitle({
    title: review ? `${review.name} Review` : 'Product Review',
    description: review ? review.description : 'Detailed product review and analysis'
  });

  if (!review) {
    return (
      <div className="w-full bg-[#0a2540] text-white p-8 text-center">
        Loading review...
      </div>
    );
  }

  // Convert rating to star display
  const renderStars = (rating: number, size = 24) => {
    const stars = [];
    const fullStars = Math.floor(rating);
    const hasHalfStar = rating % 1 >= 0.5;
    for (let i = 0; i < 5; i++) {
      if (i < fullStars) {
        stars.push(<Star key={i} size={size} fill="#f8961e" />);
      } else if (i === fullStars && hasHalfStar) {
        stars.push(<Star key={i} size={size} fill="#f8961e" strokeWidth={1} />);
      } else {
        stars.push(<Star key={i} size={size} />);
      }
    }
    return stars;
  };
  return <div className="w-full bg-[#0a2540] text-white">
      {/* Hero Section */}
      <section className="relative w-full h-[60vh] md:h-[70vh] flex items-center">
        <div className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-gradient-to-b from-[#0a2540] via-transparent to-[#0a2540] opacity-90 z-10"></div>
          <ImageWithLoading 
            src={review.heroImage} 
            alt={review.heroAlt} 
            className="w-full h-full object-cover" 
          />
        </div>
        <div className="container mx-auto px-4 md:px-8 relative z-10">
          <div className="max-w-4xl">
            <span className="inline-block bg-[#06d6a0] text-[#0a2540] text-sm font-bold px-3 py-1 rounded mb-6">
              EXPERT REVIEW
            </span>
            <div className="flex items-center mb-3">
              <div className="flex text-[#f8961e]">
                {renderStars(review.rating)}
              </div>
              <span className="ml-2 text-xl font-bold">
                {review.rating}/5.0
              </span>
            </div>
            <h1 className="text-4xl md:text-6xl font-extrabold leading-tight mb-4">
              {review.name.toUpperCase()} REVIEW
            </h1>
            <p className="text-xl md:text-2xl font-bold mb-8 text-[#06d6a0]">
              {review.tagline}
            </p>
            <p className="text-lg md:text-xl mb-8 text-gray-200 max-w-3xl">
              {review.description}
            </p>
            <Button size="lg" href="https://www.amazon.com/example" className="text-lg px-10 py-5">
              Check Best Price on Amazon
            </Button>
          </div>
        </div>
      </section>

      {/* Quick Summary */}
      <section className="py-12 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div className="bg-[#0a2540] p-6 rounded-lg">
                <h3 className="text-xl font-bold mb-4 flex items-center">
                  <Check className="text-[#06d6a0] mr-2" size={24} />
                  Pros
                </h3>
                <ul className="space-y-3">
                  {review.pros.map((pro, index) => <li key={index} className="flex">
                      <Check className="text-[#06d6a0] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>{pro}</p>
                    </li>)}
                </ul>
              </div>
              <div className="bg-[#0a2540] p-6 rounded-lg">
                <h3 className="text-xl font-bold mb-4 flex items-center">
                  <X className="text-[#f8961e] mr-2" size={24} />
                  Cons
                </h3>
                <ul className="space-y-3">
                  {review.cons.map((con, index) => <li key={index} className="flex">
                      <X className="text-[#f8961e] mr-3 mt-1 flex-shrink-0" size={18} />
                      <p>{con}</p>
                    </li>)}
                </ul>
                <button onClick={() => setIsSpecsOpen(!isSpecsOpen)} className="mt-6 w-full flex items-center justify-between bg-[#061a2c] p-3 rounded text-[#06d6a0] font-medium">
                  <span>Technical Specifications</span>
                  {isSpecsOpen ? <ChevronUp size={18} /> : <ChevronDown size={18} />}
                </button>
                {isSpecsOpen && <div className="mt-4 p-4 bg-[#061a2c] rounded-lg">
                    <ul className="space-y-2 text-sm">
                      <li className="flex justify-between">
                        <span className="text-gray-300">Stall Force:</span>
                        <span className="font-medium">
                          {review.specs.stallForce}
                        </span>
                      </li>
                      <li className="flex justify-between">
                        <span className="text-gray-300">Amplitude:</span>
                        <span className="font-medium">
                          {review.specs.amplitude}
                        </span>
                      </li>
                      <li className="flex justify-between">
                        <span className="text-gray-300">Speed Range:</span>
                        <span className="font-medium">
                          {review.specs.speedRange}
                        </span>
                      </li>
                      <li className="flex justify-between">
                        <span className="text-gray-300">Weight:</span>
                        <span className="font-medium">
                          {review.specs.weight}
                        </span>
                      </li>
                      <li className="flex justify-between">
                        <span className="text-gray-300">Battery Life:</span>
                        <span className="font-medium">
                          {review.specs.batteryLife}
                        </span>
                      </li>
                      <li className="flex justify-between">
                        <span className="text-gray-300">Noise Level:</span>
                        <span className="font-medium">
                          {review.specs.noiseLevel}
                        </span>
                      </li>
                      <li className="flex justify-between">
                        <span className="text-gray-300">Attachments:</span>
                        <span className="font-medium">
                          {review.specs.attachments}
                        </span>
                      </li>
                    </ul>
                  </div>}
              </div>
            </div>
            <div className="mt-8 text-center">
              <Button size="lg" href="https://www.amazon.com/example" className="text-lg px-10">
                See Today's Deal on Amazon
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Key Features */}
      <section className="py-16 px-4 md:px-8">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl font-bold mb-8">The In-Depth Breakdown</h2>
            <div className="mb-12">
              <h3 className="text-2xl font-bold mb-6">
                Percussive Power & Performance
              </h3>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
                <div>
                  <ImageWithLoading 
                    src={review.heroImage} 
                    alt={`${review.name} in action`} 
                    className="rounded-lg w-full h-auto" 
                  />
                </div>
                <div className="space-y-4">
                  <div className="flex items-center">
                    <div className="w-12 h-12 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mr-4">
                      <Zap className="text-[#06d6a0]" size={24} />
                    </div>
                    <div>
                      <h4 className="font-bold">
                        Stall Force: {review.specs.stallForce.split(' ')[0]} lbs
                      </h4>
                      <p className="text-gray-300 text-sm">
                        {parseInt(review.specs.stallForce) > 50 ? 'Industry-leading resistance to pressure' : parseInt(review.specs.stallForce) > 30 ? 'Strong resistance suitable for most users' : 'Adequate for light to moderate pressure'}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center">
                    <div className="w-12 h-12 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mr-4">
                      <BarChart3 className="text-[#06d6a0]" size={24} />
                    </div>
                    <div>
                      <h4 className="font-bold">
                        Amplitude: {review.specs.amplitude}
                      </h4>
                      <p className="text-gray-300 text-sm">
                        {parseInt(review.specs.amplitude) >= 16 ? '60% deeper than average massage guns' : parseInt(review.specs.amplitude) >= 12 ? 'Effective for deep tissue treatment' : 'Suitable for surface-level tension relief'}
                      </p>
                    </div>
                  </div>
                  <div className="flex items-center">
                    <div className="w-12 h-12 rounded-full bg-[#06d6a0] bg-opacity-20 flex items-center justify-center mr-4">
                      <Battery className="text-[#06d6a0]" size={24} />
                    </div>
                    <div>
                      <h4 className="font-bold">
                        Battery: {review.specs.batteryLife.split(' ')[0]}{' '}
                        Minutes
                      </h4>
                      <p className="text-gray-300 text-sm">
                        {parseInt(review.specs.batteryLife) > 240 ? 'Extended battery life for long sessions' : parseInt(review.specs.batteryLife) > 180 ? 'Ample battery for multiple sessions' : 'Sufficient for standard treatment sessions'}
                      </p>
                    </div>
                  </div>
                </div>
              </div>
              <div className="bg-[#061a2c] p-6 rounded-lg mb-8">
                <p className="text-xl italic">
                  "The {review.name}'s {review.specs.amplitude} amplitude and{' '}
                  {review.specs.stallForce.split(' ')[0]}lb stall force
                  combination
                  {parseInt(review.specs.stallForce) > 50 ? ' is unmatched in its class' : parseInt(review.specs.stallForce) > 30 ? ' delivers effective performance' : ' provides adequate treatment for most users'}
                  . In our lab tests, it delivered{' '}
                  {review.performanceMetrics.muscleTensionReduction}% effective
                  muscle tension reduction."
                </p>
              </div>
              <p className="text-gray-300 mb-4">
                After testing the {review.name} for three months across various
                recovery scenarios (post-workout, chronic tension, injury
                prevention), we found it consistently{' '}
                {review.rating > 4.5 ? 'outperformed' : review.rating > 3.5 ? 'performed well against' : 'provided adequate results compared to'}{' '}
                other massage guns in its price range.
              </p>
              <p className="text-gray-300">
                The combination of {review.specs.amplitude} amplitude and{' '}
                {review.specs.stallForce.split(' ')[0]}lb stall force means it
                can target{' '}
                {parseInt(review.specs.amplitude) >= 12 ? 'deep tissue layers' : 'surface-level tension'}
                effectively. For{' '}
                {parseInt(review.price.replace('$', '')) > 300 ? 'serious athletes' : 'active individuals'}
                , this difference is{' '}
                {review.rating > 4.0 ? 'immediately noticeable' : 'appreciable in regular use'}
                .
              </p>
              <div className="mt-8 bg-[#0a2540] p-6 rounded-lg">
                <h4 className="text-lg font-bold mb-4">
                  Performance Testing Results
                </h4>
                <div className="space-y-4">
                  <div>
                    <div className="flex justify-between mb-1">
                      <span className="font-medium">
                        Muscle Tension Reduction
                      </span>
                      <span className="font-medium">
                        {review.performanceMetrics.muscleTensionReduction}%
                      </span>
                    </div>
                    <div className="w-full bg-[#061a2c] rounded-full h-2.5">
                      <div className="bg-[#06d6a0] h-2.5 rounded-full" style={{
                      width: `${review.performanceMetrics.muscleTensionReduction}%`
                    }}></div>
                    </div>
                  </div>
                  <div>
                    <div className="flex justify-between mb-1">
                      <span className="font-medium">
                        Recovery Time Improvement
                      </span>
                      <span className="font-medium">
                        {review.performanceMetrics.recoveryTimeImprovement}%
                      </span>
                    </div>
                    <div className="w-full bg-[#061a2c] rounded-full h-2.5">
                      <div className="bg-[#06d6a0] h-2.5 rounded-full" style={{
                      width: `${review.performanceMetrics.recoveryTimeImprovement}%`
                    }}></div>
                    </div>
                  </div>
                  <div>
                    <div className="flex justify-between mb-1">
                      <span className="font-medium">
                        Consistent Force Delivery
                      </span>
                      <span className="font-medium">
                        {review.performanceMetrics.consistentForceDelivery}%
                      </span>
                    </div>
                    <div className="w-full bg-[#061a2c] rounded-full h-2.5">
                      <div className="bg-[#06d6a0] h-2.5 rounded-full" style={{
                      width: `${review.performanceMetrics.consistentForceDelivery}%`
                    }}></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="mt-8 text-center">
              <Button size="lg" href="https://www.amazon.com/example" className="text-lg px-10">
                Check Today's Price
              </Button>
            </div>
          </div>
        </div>
      </section>

      {/* Related Reviews */}
      <section className="py-16 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto">
          <div className="max-w-4xl mx-auto">
            <h2 className="text-3xl font-bold mb-8">Related Reviews</h2>
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {review.relatedReviews.map((related, index) => <a key={index} href={`/reviews/${related.slug}`} className="group">
                  <div className="bg-[#0a2540] rounded-lg overflow-hidden">
                    <div className="relative h-48">
                      <ImageWithLoading 
                        src={related.image} 
                        alt={related.name} 
                        className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" 
                      />
                      <div className="absolute top-0 right-0 bg-[#0a2540] p-2">
                        <div className="flex text-[#f8961e]">
                          {renderStars(related.rating, 14)}
                        </div>
                      </div>
                    </div>
                    <div className="p-4">
                      <h3 className="font-bold mb-2 group-hover:text-[#06d6a0] transition-colors">
                        {related.name}
                      </h3>
                      <p className="text-sm text-gray-300 mb-2">
                        {related.description}
                      </p>
                      <span className="text-[#06d6a0] text-sm font-medium flex items-center">
                        Read Review <ArrowRight size={14} className="ml-1" />
                      </span>
                    </div>
                  </div>
                </a>)}
            </div>
          </div>
        </div>
      </section>

      {/* Fixed CTA Button */}
      <div className="fixed bottom-0 left-0 w-full bg-[#0a2540] border-t border-[#1a3a5c] p-4 z-50 md:hidden">
        <Button href="https://www.amazon.com/example" className="w-full">
          Buy on Amazon
        </Button>
      </div>
    </div>;
}